<template>
    <div class="image-loader-container">
      <img v-if="!everythingDone" class="placeholder" :src="placeholder" alt="" />
      <img
        @load="handleLoad"
        :src="src"
        alt=""
        :style="{ opacity: originOpacity, transition: `${duration}ms` }"
      />
    </div>
  </template>
  
  <script>
  export default {
    props: {
      src: {
        type: String,
        required: true,
      },
      placeholder: {
        type: String,
        required: true,
      },
      duration: {
        type: Number,
        default: 500,
      },
    },
    data() {
      return {
        originLoaded: false, //  原图是否加载完成
        everythingDone: false, // 是否一切都尘埃落定了
      };
    },
    computed: {
      originOpacity() {
        return this.originLoaded ? 1 : 0;
      },
    },
    methods: {
      handleLoad() {
        this.originLoaded = true;
        setTimeout(() => {
          this.everythingDone = true;
          this.$emit("load");
        }, this.duration);
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  @import "~@/styles/mixin.less";
  .image-loader-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    img {
      .self-fill();
      object-fit: cover;
    }
  
    .placeholder {
      filter: blur(2vw);
    }
  }
  </style>
  